<template>
	<view class="container bar">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{data.title}}</block>
		</cu-custom>
		<view class="postform">
			<view class="head">
				<view class="cover" v-if="data.cover">
					<image :src="data.cover" mode="widthFix"></image>
					<button @click="ChooseCover" class="cu-btn bg-yellow sm round text-white">重新上传</button>
				</view>
				<view @click="ChooseCover" class="uploader text-center" v-else>
					<view class="nocover">
						<image src="@/static/images/img_no_cover.png" mode="aspectFit"></image>
					</view>
					<view class="text-muted padding-xs">
						<text>点击添加专栏封面</text>
					</view>
				</view>
			</view>
			<view class="padding padding-top-xs">
				<view class="cu-form-group flex flex-direction must">
					<view class="text-boldm">专栏标题</view>
					<view class="input-block">
						<input placeholder="给专栏起一个有吸引力的标题" v-model="postdata.title" name="title"></input>
					</view>
				</view>
				<view class="cu-form-group flex flex-direction">
					<view class="text-boldm">副标题</view>
					<view class="input-block">
						<input type="text" placeholder="将显示在标题下方" v-model="postdata.subtitle" name="subtitle"></input>
					</view>
				</view>
				<view class="cu-form-group text-xl">
					<textarea maxlength="-1" placeholder="请输入专栏简介" v-model="postdata.summary"></textarea>
				</view>
				<view class="cu-form-group">
					<view class="text-boldm">专栏状态</view>
					<radio-group @change="ChangeStatus">
						<label>
							<radio class='red radio' :class="postdata.status==1?'checked':''" :checked="postdata.status==1?true:false" value="1"></radio>
							<text class="padding-left-sm">上架</text>
						</label>
						<label class="margin-left padding-left">
							<radio class='red radio' :class="postdata.status==2?'checked':''" :checked="postdata.status==2?true:false" value="2"></radio>
							<text class="padding-left-sm">下架</text>
						</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="text-boldm">收费专栏</view>
					<switch @change="ChangeFree" class="yellow" :class="isfree?'':'checked'" :checked="isfree?false:true"></switch>
				</view>
				<view v-if="!isfree" class="border-top specs">
					<view class="cu-form-group sub-form">
						<view class="text-boldm">售价</view>
						<view class="input-block flex justify-end">
							<input type="digit" placeholder="输入价格" v-model="postdata.price" name="price"></input>
							<text class="text-xl text-gray">元</text>
							<view class="text-xl text-white padding-left-sm"><text class="cuIcon-close"></text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-bar tabbar">
			<view class="action">
				<view class="flex flex-direction padding-left-xl padding-right-xl">
					<button class="cu-btn bg-orange-red round-topleft-none lg" @click="SubmitPost">保存</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import core from "@/static/core.js"
	
	export default {
		data() {
			return {
				id:0,
				isfree:true,
				postdata:{
					title:"",
					subtitle:"",
					summary:"",
					cover:"",
					price:0,
					status:1
				},
				data:{
					title:"发布专栏",
					cover:"",
					special:{
						id:0
					}
				}
			}
		},
		onLoad(options) {
			if(typeof(options.id)!='undefined' && options.id>0){
				this.id = options.id;
			}
			var id = options.id
			// if(core.userinfo.uid==0) return core.toast('请先登录','login');
			// var that = this;
			// this.initData('special/post',{id:this.id},function(res){
			// 	if(res.special.id>0){
			// 		that.id = res.special.id;
			// 		for(let i in that.postdata){
			// 			that.postdata[i] = res.special[i];
			// 		}
			// 		if(res.special.price>0){
			// 			that.isfree = false;
			// 		}
			// 	}
			// });
			this.selById(id);
		},
		methods:{
			initData(route, data={}, callback=false){
				var that = this;
				core.get(route,function(res){
					if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
						return core.report(res, true);
					}
					that.data = res;
					uni.setNavigationBarTitle({
						title:res.title
					});
					if(callback){
						callback(res);
					}
				},data);
			},
			naviTo(page,data={}){
				return core.navito(page,data);
			},
			unSupport(){
				return core.toast('敬请期待');
			},
			async selById(id){
				console.log(id)
				var Id = id
				if(Id!='undefined' && Id>=0){
					let lan = this.postdata;
						lan=(await this.$api.reqGet({
						url:"column/selById/"+id,
					})).data[0];
						this.postdata.title = lan.title
						this.postdata.subtitle = lan.subtitle
						this.postdata.price = lan.price
						this.data.cover = lan.imgUrl
						this.isfree = lan.isfree
						this.postdata.summary = lan.summary
						console.log(this.isfree)
				}			
			},
			async SubmitPost(id){
				console.log(id)
				var id = id;
				let col = this.postdata;
				var that = this
					if(this.data.title=='') return core.toast('请输入专栏标题');
					if(this.data.cover=='') return core.toast('请上传专栏封面');
					// if(this.isfree==0 && this.data.price){
					// 	alert("请输入专栏售价")
					// }
					// if(this.isfree==0 && this.data.price==0) return core.toast('请输入专栏售价');
					// if(this.isfree) data.price = 0;
					// var that = this;
					// return core.post('special/post',function(res){
					// 	if(res.type!='success') core.report(res);
					// 	return core.toast(res.message,res.redirect,res.type);
					// },{id:this.id,data:data});
					
					
					var a =(await this.$api.reqPost({
						url:"column/ins",
						data:{
						id:that.id,
						uid:core.userinfo.uid,
						title:col.title,
						subtitle:col.subtitle,
						summary:col.summary,
						status:col.status,
						price:col.price,
						isfree:this.isfree,
						imgUrl:this.data.cover
					}
				})).data;
					alert("保存成功,返回首页")
					return core.navito("index/index")	
			},
			ChangeStatus(e){
				this.postdata.status = e.detail.value;
			},
			ChangeFree(e){
				this.isfree = !e.detail.value;
			},
			ChooseCover(){
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						core.upload(res.tempFilePaths[0],function(res){
						that.data.cover = res.data;
						that.postdata.cover = res.tempFilePaths;
						});
					}
				});
			}
		}
	}
</script>

<style>
	page{background: #FFFFFF;}
	.cover{position: relative;}
	.cover .cu-btn{position: absolute; right: 20upx; bottom: 20upx;}
	.uploader{padding: 130upx 0; background: #F7F7F7;}
	.nocover image{width: 78upx; height: 63upx;}
</style>
